<template>
	<div id="qujian-add-container">
		<div class="qujian-add-header">
			<i class="el-icon-arrow-left" @click="goBack()"></i>
			<span>裹裹亲友</span>
		</div>
		<div class="qujian-add-title">
			<p>输入亲友的手机号</p>
			<p>绑定成功后，你和亲友可互相查看包裹物流状态</p>
		</div>
		<div class="qujian-add-phonenumber">
			<el-input
				class="qujian-add-input"
			    placeholder="请输入手机号"
			    suffix-icon="el-icon-s-management"
			    v-model="userForm.f_num">
			  </el-input>
			<el-button type="primary" round @click="addFriend()">立即绑定</el-button>
			<p>点击绑定即代表您已阅读并同意《服务协议》</p>
		</div>
		<div class="qujian-add-keyboard">
			
		</div>
	</div>
</template>

<script>
	export default{
		name:'qujian-add',
		data() {
		    return {
		      userForm: {
		         phonenum: '',
				 f_num: ''
			  }
		    }
		},
		methods: {
			addFriend() {
				this.userForm.phonenum = window.sessionStorage.getItem('phonenum');
		        this.$http.post('/api/add_friends', this.userForm)
		            .then(({data, config}) => {
		                if (data.code == 200) {
		                    this.$message({
		                        message: '添加成功！',
		                        type: 'success'
		                    });
		                    this.$router.push('/qujian')
		                } else {
		                    this.$message({
		                        message: '号码错误！',
		                        type: 'warning'
		                    })
		                }
		            })
		    },
			goBack() {
		    	this.$router.back(-1)
			}
		}
	}
	 
</script>

<style lang="scss" >
	#qujian-add-container{
		background-color: white;
	}
	.qujian-add-header{
		height: 100px;
		width: 100%;
		border-bottom: 1px solid gainsboro;
        display: flex;
		span{
			font-size:35px;
			line-height: 100px;
			margin-left: 25%;
		}
		i{
			float: left;
			margin: 40px;
			font-size: 30px;
		}
	}
	.qujian-add-title{
		margin: 20px;
		p:nth-child(1){
			font-size:30px;
			font-weight:600;
		}
		p:nth-child(2){
			color: gray;
		}
	}
	.qujian-add-input > .el-input__inner{
		height:50px;
		width: 95%;
		margin:20px;
		border-radius: 30px;
	}
	.el-input__suffix {
	    right: 50px;
	}
	.qujian-add-phonenumber{
		text-align: center;
		height: 1400px;
		p{
			color:lightslategray;
		}
	}
    .el-button--primary {
    	width: 50%;
		height: 60px;
    }
	.el-button.is-round {
	    border-radius:50px;
	   margin: 20px;
	}
</style>
